<!--
 * @Author: raoyonggang 11886335+ryg321@user.noreply.gitee.com
 * @Date: 2024-06-18 14:09:07
 * @LastEditors: raoyonggang 11886335+ryg321@user.noreply.gitee.com
 * @LastEditTime: 2024-06-18 15:34:28
 * @FilePath: \v9\src\components\MainPagination\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-pagination
    :current-page.sync="pageCount"
    :page-sizes="[10, 20, 30, 50, 100]"
    :page-size="pageSize"
    layout="total, prev, pager, next, sizes"
    :total="total"
    :pager-count="pagerCount"
    @size-change="changeLimit"
    @current-change="changePage"
    popper-class="main-pagination-select"
    class="main-pagination"
    small
  />
</template>

<script>

export default {
  name: 'MainPagination',
  props: {
    currentPage: {
      type: Number,
      default: 1
    },
    pageSize: {
      type: Number,
      default: 20
    },
    total: {
      type: Number,
      default: 0
    },
    pagerCount: {
      type: Number,
      default: 5
    }
  },
  data () {
    return {
      
    }
  },
  computed: {
    pageCount: {
      get() {
        return this.currentPage
      },
      set(val) {
        // console.log(val);
      }
    }
  },
  methods: {
    changeLimit (pageSize) {
      this.$emit('size-change', pageSize)
    },
    changePage (page) {
      this.$emit('current-change', page)
    }
  }
}
</script>
<style lang="scss" scoped>
// @import "@/styles/variables.scss";
$new_text_color_85: rgba(0,0,0,0.85);
.main-pagination {
  /deep/.el-pager li{
    color: $new_text_color_85;
    font-weight: 100;
    &:hover {
      color: #42BEAA;
    }
    &.active {
      border: 1px solid #42BEAA;
      color: #42BEAA;
      border-radius: 4px 4px 4px 4px;
    }
  }
  /deep/.el-pagination__total {
    color: $new_text_color_85;
  }
  /deep/.el-input--mini .el-input__inner {
    height: 24px;
    line-height: 24px;
    color: $new_text_color_85;
  }
  /deep/.el-select .el-input {
    width: 95px;
  }
}
</style>